<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-14 23:05:38
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 16:35:33
 * @Description: 
-->
<template>
  <div class="content">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>管理员信息编辑</span>
        </div>
      </template>
      <el-form
        ref="adminFormRef"
        :rules="rules"
        label-position="top"
        :model="adminForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input
          disabled
            v-model="adminForm.username"
            placeholder="Please input username"
          />
        </el-form-item>
        <el-form-item label="昵称" prop="fullname">
          <el-input
            v-model="adminForm.fullname"
            placeholder="Please input nickname"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="adminForm.sex" class="m-2" placeholder="Select">
            <el-option
              v-for="(item,index) in ['男','女']"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="adminForm.email"
            placeholder="Please input email"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input
            v-model="adminForm.tel"
            placeholder="Please input tele_num"
          />
        </el-form-item>
        <el-form-item label="权限" prop="role">
          <el-select v-model="adminForm.role" class="m-2" placeholder="Select">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="头像"  prop="avatar">
          <SingleUpload v-model="adminForm.avatar" dataType="avatar" />
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button
            class="btn-1"
            type="primary"
            style="width: 100%"
            size="large"
            round
            @click.prevent="onSubmit(adminFormRef)"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script setup>
import {
  ref,
  reactive,
  computed,
  onBeforeUnmount,
  shallowRef,
  onMounted,
} from "vue";
import SingleUpload from "@/components/SingleUpload.vue";
import { admin, role } from "@/api";
import { useRouter } from "vue-router";

const router = useRouter();

// 获取权限列表
const roleList = (await role.getList()).data;

// 表单实例
const adminFormRef = ref(null);
console.log(router.currentRoute.value.query);
// 获取文章详情
const adminForm = ref((await admin.info(router.currentRoute.value.query)).data);

console.log(adminForm.value);

// 验证规则
const rules = reactive({
   username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  fullname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
  avatar: [{ required: true, message: "请添加头像", trigger: "blur" }],
});

// 发布文章
const onSubmit = (form) => {
  form.validate(async (valid, fields) => {
    if (valid) {
      console.log(adminForm.value);
      let { status, msg, data } = await admin.edit(adminForm.value);
      if (status) {
        ElMessage.success(msg);
        router.go(-1)
        return;
      }
      ElMessage.error(msg);
      return;
    }
  });
};
</script>

<style lang='less' scoped>
</style>

